<template>
    <div>
        <div class="copy">
            <el-button @click="copy('html')">html</el-button>
            <el-button @click="copy('js')">js</el-button>
            <el-button @click="copy('css')">css</el-button>
        </div>
        <div class="text">
            <textarea id="content"></textarea>
        </div>
    </div>
</template>
<script>

import {getCopyInfo} from './copy.js'
export default {
    props: ['code'],
    data() {
        return {
            text: '',
        }
    },
    methods: {
        copy(val) {
            this.text = getCopyInfo(this.code,val)
            if(this.text==''||this.text==``){
                this.$message.warning('该模块无需复制！');
            }else{
                this.do()
            }
        },
        do() {
            var e = document.getElementById("content");//对象是content
            e.value = this.text
            console.log(e.value)
            if (e.value != "") {
                e.select();//选择对象
                document.execCommand("Copy");//执行浏览器复制命令
                this.$message.success('复制成功！');
            } else {
                this.$message.error('复制失败！');
            }
        }

    }
}
</script>
    
<style lang="less" scoped>
.copy {
    position: absolute;
    width: 250px;
    height: 50px;
    background-color: #fff;
    top: 0;
    right: -50px;
    margin-top: 20px;
}

.text {
    position: absolute;
    top: 0;
    right: -50px;
    margin-top: 20px;
    z-index: -99999;
}
</style>
    